<template>
	<el-dropdown @command="handleCommand" trigger="click">
		<span class="flex items-center el-dropdown-link">
			<svg
				t="1727511423193"
				class="mr-2 w-6 h-6"
				viewBox="0 0 1024 1024"
				version="1.1"
				xmlns="http://www.w3.org/2000/svg"
				p-id="4267"
				width="256"
				height="256"
			>
				<path
					d="M633.6 938.666667c-8.533333 0-17.066667-6.4-21.333333-14.933334-14.933333-44.8-55.466667-72.533333-102.4-72.533333s-87.466667 29.866667-102.4 72.533333c-4.266667 10.666667-14.933333 17.066667-25.6 14.933334-74.666667-21.333333-140.8-61.866667-194.133334-117.333334-8.533333-8.533333-8.533333-21.333333 0-27.733333 17.066667-19.2 25.6-42.666667 25.6-68.266667 0-57.6-46.933333-104.533333-106.666666-104.533333h-10.666667c-10.666667 2.133333-21.333333-6.4-23.466667-17.066667-6.4-29.866667-8.533333-59.733333-8.533333-89.6 0-44.8 6.4-89.6 21.333333-132.266666 2.133333-8.533333 10.666667-14.933333 21.333334-14.933334 59.733333 0 108.8-46.933333 108.8-104.533333 0-17.066667-4.266667-32-10.666667-46.933333-6.4-10.666667-4.266667-21.333333 2.133333-27.733334 53.333333-49.066667 117.333333-83.2 185.6-102.4 10.666667-2.133333 19.2 2.133333 25.6 10.666667 19.2 36.266667 55.466667 57.6 96 57.6s76.8-21.333333 96-57.6c4.266667-8.533333 14.933333-12.8 25.6-10.666667 68.266667 19.2 132.266667 53.333333 185.6 102.4 6.4 6.4 8.533333 17.066667 4.266667 25.6-6.4 14.933333-10.666667 29.866667-10.666667 46.933334 0 57.6 46.933333 104.533333 106.666667 104.533333 8.533333 0 19.2 6.4 21.333333 14.933333 12.8 42.666667 21.333333 87.466667 21.333334 132.266667 0 29.866667-2.133333 59.733333-8.533334 89.6-2.133333 10.666667-12.8 19.2-23.466666 17.066667h-10.666667c-59.733333 0-106.666667 46.933333-106.666667 104.533333 0 25.6 8.533333 49.066667 25.6 68.266667 6.4 8.533333 6.4 21.333333 0 27.733333-59.733333 55.466667-125.866667 96-200.533333 119.466667h-6.4zM512 808.533333c57.6 0 108.8 32 134.4 83.2 53.333333-19.2 102.4-49.066667 145.066667-87.466666-14.933333-23.466667-23.466667-51.2-23.466667-78.933334 0-78.933333 64-145.066667 145.066667-147.2 4.266667-21.333333 4.266667-42.666667 4.266666-64 0-36.266667-4.266667-72.533333-14.933333-106.666666-74.666667-6.4-134.4-70.4-134.4-147.2 0-17.066667 2.133333-34.133333 8.533333-49.066667-40.533333-34.133333-89.6-61.866667-140.8-78.933333-27.733333 40.533333-72.533333 66.133333-123.733333 66.133333s-96-25.6-123.733333-66.133333c-51.2 17.066667-100.266667 42.666667-140.8 78.933333 6.4 14.933333 8.533333 32 8.533333 49.066667 0 76.8-59.733333 140.8-134.4 147.2-8.533333 34.133333-14.933333 70.4-14.933333 106.666666 0 21.333333 2.133333 42.666667 4.266666 64 81.066667 0 145.066667 66.133333 145.066667 145.066667 0 27.733333-8.533333 55.466667-23.466667 78.933333 40.533333 38.4 91.733333 68.266667 145.066667 87.466667 25.6-49.066667 76.8-81.066667 134.4-81.066667z"
					fill="#333333"
					p-id="4268"
				></path>
				<path
					d="M512 682.666667c-93.866667 0-170.666667-76.8-170.666667-170.666667s76.8-170.666667 170.666667-170.666667 170.666667 76.8 170.666667 170.666667-76.8 170.666667-170.666667 170.666667z m0-298.666667c-70.4 0-128 57.6-128 128s57.6 128 128 128 128-57.6 128-128-57.6-128-128-128z"
					fill="#333333"
					p-id="4269"
				></path>
			</svg>
			{{ selectedModel?.name }}
		</span>
		<template #dropdown>
			<el-dropdown-menu>
				<el-dropdown-item v-for="model in models" :key="model.id" :command="model" :class="{ 'is-active': selectedModel?.id === model.id }">
					{{ model.name }}
				</el-dropdown-item>
			</el-dropdown-menu>
		</template>
	</el-dropdown>
</template>

<script setup lang="ts">
import { list } from '/@/api/knowledge/aiModel';
import { Local } from '/@/utils/storage';
import { providerModels } from '/@/views/knowledge/aiModel/model';

interface AiModel {
	id: string;
	modelName: string;
	name: string;
	provider?: string;
	model?: string;
	modelType?: string;
	defaultModel?: string;
}

// 定义模型条目类型
interface ModelEntry {
	type: string;
	model: string;
	json?: boolean;
}

// 提供商模型映射类型
type ProviderModelMap = Record<string, ModelEntry[]>;

interface Props {
	modelType: ('Image' | 'Reason' | 'Chat' | 'Video' | 'Voice')[];
	supportJson?: boolean;
}

const props = defineProps<Props>();
const models = ref<AiModel[]>([]);
const selectedModel = ref<AiModel | null>(null);

// Add emit definition
const emit = defineEmits(['update:model']);

// 当组件挂载或modelType变更时加载模型
async function loadModels() {
	try {
		const res = await list({});
		// 按modelType过滤模型
		let filteredModels = res.data.filter((model: AiModel) => props.modelType.some((type) => type === model.modelType));

		// 如果supportJson为true，过滤支持图表的模型
		if (props.supportJson) {
			filteredModels = filteredModels.filter((model: AiModel) => {
				const provider = model.provider || '';
				const name = model.modelName || '';

				// 查找匹配的模型配置
				const modelEntries = (providerModels as ProviderModelMap)[provider];
				const matchingModel =
					modelEntries && Array.isArray(modelEntries)
						? modelEntries.find((entry: ModelEntry) => entry.model === name && entry.json === true)
						: undefined;

				return !!matchingModel;
			});
		}

		models.value = filteredModels;

		// 如果supportJson为true，直接使用第一个模型
		if (props.supportJson) {
			selectedModel.value = models.value[0];
		} else {
			// 否则从本地存储获取选定的模型或使用第一个模型作为默认值
			const storedModel = Local.get(`selectedAiModel:${props.modelType.join('-')}`);
			selectedModel.value = storedModel ? models.value.find((m) => m.id === storedModel.id) || models.value[0] : models.value[0];
		}

		// 将选定的模型保存到本地存储
		if (selectedModel.value) {
			Local.set(`selectedAiModel:${props.modelType.join('-')}`, selectedModel.value);
		}
	} catch (error) {
		console.error('获取模型列表失败', error);
		// 静默失败并设置空模型列表
		models.value = [];
	}
}

// 监听modelType变化
watch(
	() => props.modelType,
	() => {
		loadModels();
	},
	{ immediate: true }
);

// Handle model selection
const handleCommand = (model: AiModel) => {
	selectedModel.value = model;
	Local.set(`selectedAiModel:${props.modelType.join('-')}`, model);
	emit('update:model', model);
};

// Add watch to emit when selectedModel changes initially
watch(
	() => selectedModel.value,
	(newVal) => {
		if (newVal) {
			emit('update:model', newVal);
		}
	},
	{ immediate: true }
);

onMounted(() => {
	loadModels();
});
</script>

<style scoped>
.el-dropdown-menu__item.is-active {
	color: var(--el-color-primary);
	font-weight: bold;
}
</style>
